<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 关于我们 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .div_p {
    font-size: 65px;
    color: #8eb359;
    text-align: center;
    font-weight: 600;
  }

  .div_p_p {
    font-size: 12px;
    text-align: center;
  }
</style>

<body>
  <div id="about">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 网页内容 -->
    <section>
      <div style="width: 100%; height: 400px; overflow: hidden;">
        <img src="../img/slider-home-v1.jpg" width="100%" alt="">
      </div>
    </section>
    <!-- 关于我们 -->
    <section class="about_1" style="margin: 3% 0;">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img class="about_1_1" src="../img/object-09.png" alt="">
            <div class="about_1_2" style="display: flex; margin-top: 2%;margin-bottom: 3%;">
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
              <div class="about_1_3" style="margin: auto;">
                <h2 style="font-weight: 600;margin: auto;">我们的品牌介绍</h2>
              </div>
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="about_1_4" style="padding: 0;font-size: 12px; color: #5a5a5a;">
          <p>本公司成立于2000年10月，主要从事花卉种子生产和销售，是目前国内拥有花卉品种较多的公司之一，公司建有多处花卉种子生产基地，
            每年可自产花种２００余种，其中其中万寿菊“东方”系列”百日草“梦幻”系列、花毛良“仙境”系列、三色堇“彩蝶”系列、
            瓜叶菊“东方”系列、雏菊“苏菲亚、春情”系列、孔雀草“珍奇”系列、凤仙花“金凤”系列等，则为公司繁育的众多品种中表现较优秀的主打品种，主
            要供应国内不同地区专业盆花生产者的需要。</p>
          <p>公司**重视花卉品种的发展动向和新品种培育，力争生产和经销的品种处于领先地位。为适应当前专业生产盆花的需要，确保种子质量，
            公司特在高海拔地区建立花卉种子生产基地，克服了光照不足和温差过小的缺，经专业技术人员精心管理，进一步提高了种子质量。</p>
          <p>
            作为一家专业的花卉种子公司，公司在其生产和引进花卉品种时特别重视质量，尽力选择适合我国种植的品质优良的品种，以专业的种植技术提供售后服务，
            公司技术服务部接受产品质量，种植技术等相关咨询（咨询电话：XXXXXXXXXX），并为客户推荐适合自己生产的品种。
          </p>
          <p>公司备有品种目录和图谱，可通过信件、电话、短信或网上联系免费索取。如需购种，可通过邮局或银行汇款，款到后邮种。</p>
        </div>
      </div>
    </section>
    <!-- 培育 -->
    <section class="about_2" style="margin-bottom: 2%;">
      <div class="container">
        <div style="display: flex;">
          <div style="width: 60%;">
            <div class="about_2_1">
              <img src="../img/object-08.jpg" alt="">
            </div>
            <div class="about_2_2" style="margin-top: 3%;height: 180px; overflow: hidden;position: relative;">
              <img src="../img/banner-h11.jpg" width="95%" alt="">
              <h3 style="position: absolute; top: 30%;right: 13%;">专注于多肉绿植培植</h3>
              <span style="font-size: 14px;color: #5a5a5a; position: absolute;top: 50%; right: 10%;">Focus on multi-meat
                planting and planting</span>
            </div>
          </div>
          <div style="width: 40%;position: relative;">
            <h1 class="about_2_3" style="font-weight: 600;font-size: 40px;position: absolute;left: -20%;top: 10%;">萌肉来袭，为您的家提供一抹清新的自然！
            </h1>
            <div class="about_2_4" style="margin-top: 50%;">
              <div style="display: flex;">
                <div style="width: 30%;text-align: right;padding-right: 5%;">
                  <img src="../img/icon-04.png" alt="">
                </div>
                <div style="width: 70%;">
                  <h5>天然培植方法</h5>
                  <p style="font-size: 14px;color: #5a5a5a;">我们拥有大型的培植基地，植物均采用天然培育方法</p>
                </div>
              </div>
              <div style="display: flex;margin-top: 10%;">
                <div style="width: 30%; text-align: right;padding-right: 5%;">
                  <img src="../img/icon-05.png" alt="">
                </div>
                <div style="width: 70%;">
                  <h5>专属配送服务</h5>
                  <p style="font-size: 14px;color: #5a5a5a;">订单信息确认无误后，通常在1-2个工作日内将植物发出</p>
                </div>
              </div>
              <div style="display: flex;margin-top: 10%;">
                <div style="width: 30%; text-align: right;padding-right: 5%;">
                  <img src="../img/icon-06.png" alt="">
                </div>
                <div style="width: 70%;">
                  <h5>售后服务保障</h5>
                  <p style="font-size: 14px;color: #5a5a5a;">如果在运输过程中造成植物的损坏，我们会直接给您良好的保障</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 业务 -->
    <section class="about_3" style="margin: 5% 0;">
      <div class="container">
        <div class="row">
          <div class="col-md-3 about_3_1" style="border-right: 1px dashed #999;">
            <p class="div_p">27<span style="font-size: 10px;">年</span></p>
            <p class="div_p_p">工作经验</p>
          </div>
          <div class="col-md-3 about_3_2" style="border-right: 1px dashed #999;">
            <p class="div_p">169<span style="font-size: 10px;">个</span></p>
            <p class="div_p_p">到达城市</p>
          </div>
          <div class="col-md-3 about_3_3" style="border-right: 1px dashed #999;">
            <p class="div_p">32<span style="font-size: 10px;">位</span></p>
            <p class="div_p_p">手工花艺师</p>
          </div>
          <div class="col-md-3 about_3_4">
            <p class="div_p">6900<span style="font-size: 10px;">+</span></p>
            <p class="div_p_p">培育的盆栽植物</p>
          </div>
        </div>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>
  const r1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.about_1_1', { duration: 1, opacity: 0 })
    t1.from('.about_1_2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.about_1_3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.about_1_4', {ease: "power1.out", duration: 1, opacity: 0 })
  })
  r1.observe(document.querySelector('.about_1'))

  const r2 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.about_2_1', { duration: 1, opacity: 0 })
    t1.from('.about_2_2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.about_2_3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.about_2_4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r2.observe(document.querySelector('.about_2'))

  const r3 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.25 } })
    t1.from('.about_3_1', { duration: 1, opacity: 0 })
    t1.from('.about_3_2', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.about_3_3', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.about_3_4', { y: 300, ease: "power1.out", duration: 1, opacity: 0 })
  })
  r3.observe(document.querySelector('.about_3'))
</script>

</html>